<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"  content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>{block name="title"}{$Think.config.site.title}{/block}</title>
    <link rel="Bookmark" href="__ROOT__/favicon.ico" >
    <link rel="Shortcut Icon" href="__ROOT__/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="__LIB__/Hui-iconfont/1.0.7/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="__LIB__/icheck/icheck.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/h-ui.admin/css/style.css"/>
    <script type="text/javascript" src="__LIB__/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="__ROOT__/static/laydate/laydate.js"></script>
    <script type="text/javascript" src="__ROOT__/static/admin/lib/echarts.common.min.js"></script>
    <script type="text/javascript" src="__LIB__/layer/2.4/layer.js"></script>
</head>
<body>
<nav class="breadcrumb">
    <div id="nav-title"></div>
</nav>
<div class="page-container">
    <form class="mb-20" id="searchForm" method="post">
        对比时间段1：<input type="text" id="from_time1" class="input-text layui-input" readonly style="width:200px;" autocomplete="off" placeholder="来访时间" name="from_time1" value="" >
        对比时间段2：<input type="text" id="from_time2" class="input-text layui-input" readonly style="width:200px;" autocomplete="off" placeholder="来访时间" name="from_time2" value="" >
        <button type="submit" class="btn btn-success"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
    </form>
    <div id="echarts-box1" style="width:100%;height:400px;min-width:600px;">

    </div>
    <div id="echarts-box2" style="width:100%;height:400px;min-width:600px;">

    </div>

</div>
<script type="text/javascript">
    var isAjax = false;
    window.onload = function(){
        laydate.render({
            elem: '#from_time1'
            ,range: true
        });
        laydate.render({
            elem: '#from_time2'
            ,range: true
        });
        var myChart1 = echarts.init(document.getElementById('echarts-box1'));
        var myChart2 = echarts.init(document.getElementById('echarts-box2'));

        $('#searchForm').submit(function () {
            if( isAjax ) {
                return false;
            }
            isAjax = true;
            var post = $(this).serializeArray();
            $.ajax({
                beforeSend:function(){ },
                url:'{:\\think\\Request::instance()->baseUrl()}',// 跳转到 action
                type: 'post',
                cache: false,
                async: false, /*true异步执行，false*/
                data:post,
                dataType: 'json',
                timeout:8000,
                success:function(ret) {
                    if(ret.code == 0 ) {
                        myChart1.setOption(ret.data.option1);
                        myChart2.setOption(ret.data.option2);
                    } else {
                        layer.msg(ret.msg);
                    }
                },
                error : function(xmlHttpRequest, error) {
                    alert(error);
                },
                complete:function(){
                    isAjax = false;
                }
            });
            return false;
        });


    }
</script>
</body>
</html>